﻿@using System.Drawing
@using System.Globalization
@using AForge.Imaging.Filters
@using Eksponent.CropUp
@using Eksponent.CropUp.AutoDetect
@using Eksponent.CropUp.Client
@using Eksponent.CropUp.JavaScript
@{
    ViewBag.Title = "Index";

    //CropUp.CropDataProvider.SaveCropData("~/Content/Lighthouse.jpg", new ImageCropData {Default = new CropInfo {Gravity = new PointF(.2f, .2f)}});
}
Server side:<br />
<img src="@CropUp.GetUrl("~/Content/Lighthouse.jpg", new ImageSizeArguments { Width = 200, Height = 200})" />
<br />



@{
    var paths = new[] { "~/Content/Me.jpg", "~/Content/Lighthouse.jpg", "~/Content/Big1.jpg" };
    for(var i= 0; i < paths.Length; i++ ) {

<div style="position:absolute;top:0;right:@(i*200)px;">
    Auto suggest:
    @{
        var path = paths[i];
        var suggestData = ((DefaultCropDataProvider) CropUp.CropDataProvider).AutoDetector.SuggestCropInfo(path, CropUp.Dialect);
    
        var data = ClientDataConverter.FromCropInfo(suggestData);
    }
    <div class="suggest-editor" style="width: 200px;">
        <input type="hidden" value='{ "default": @Json.Encode(data)}' />
        <img src="@CropUp.GetUrl(path, new ImageSizeArguments { Width = 150, CropMode = CropUpMode.Max})"/>
    </div>
</div>
    }
}
    
Client side:<br />

<div style="margin-left: 220px; position: relative;">		
    <div id="editor" style="position: absolute; top: 0px; left: -220px;">
        <input type="hidden" value='{ "default": {"gravity":[0.12,0.2278], "box": [0,0,1,1]}}' />
        <img src="@CropUp.GetUrl("~/Content/Lighthouse.jpg", new ImageSizeArguments { Width = 200, CropMode = CropUpMode.Max})"/>
    </div>
		
    @CropUpHtml.CropUpResponsive("~/Content/Lighthouse.jpg", upscaleStep: 200,
        cssClass: "resizable", style: "width:100%; height:200px", id: "editor-target",        
        cropInfo: new CropInfo { Gravity = new PointF(0.12f, 0.2278f) })    
</div>    
<br />
<br />
Client side 2:
<div style="margin-left: 220px; position: relative;">		
    <div id="editor2" style="position: absolute; top: 0px; left: -220px;">
        <input type="hidden" value='{ "default": {"box": [0.36,0.123,0.79,0.455], "gravity":[0.55,0.30]} }'  />
        <img src="@CropUp.GetUrl("~/Content/Christian.jpg", new ImageSizeArguments { Width = 200, CropMode = CropUpMode.Max})"/>
    </div>
		
    @CropUpHtml.CropUpResponsive("~/Content/Christian.jpg", upscaleStep: 200,
        cssClass: "resizable", style: "width:100%; height:200px", id: "editor-target2",            
                cropInfo: new CropInfo
                    {
                        TopLeft  = new PointF(0.36f,0.123f), 
                        BottomRight = new PointF(0.79f, 0.455f), 
                        Gravity = new PointF(0.55f, 0.30f)
                    })    
</div>    

<script>
    $(function () {
        $(".resizable").resizable({
            resize: function () {
                CropUp.update(this);
            }
        });

        $(".suggest-editor").cropUpEditor();

        $("#editor").cropUpEditor({
            update: function (data) {
                $("#editor-target").cropUp(data["default"], { duration: 500 });
            }
        });
        $("#editor2").cropUpEditor({
            update: function (data) {
                $("#editor-target2").cropUp(data["default"], { duration: 500 });
            }
        });
    });
</script>